<template>
  <div class="workSheetHomePage">
    <div class="main">
     <!--  <div class="homeBackground" style="width:100%;height:50px;">
      </div> -->
      <div class="introduce">
        <a href="javascript:;" class="worksOrders">
            <img src="../../styles/logo.svg" alt="" style="width:100%;">
        </a>
        <div class="spanSty">工单处理进度</div>
        <div @click="backToHomepage" class="backHome"  v-focusable>
          <span style="font-size:17px;position: relative;top:1px;" class="iconfont">&#xe668;</span>
        </div>
      </div>
      <div class="vux-circle-demo">
        <div class="home-scircle">
          <img src="../../assets/icon/cicle.png" alt="">
          <div class="home-scirle-inner">
            <span v-if="percent.toString.length>0">{{percent}}%</span>
            <span v-else><i class="el-icon-loading"></i></span>
          </div>
        </div>
      </div>
      <div class="description">
        <div class="workSheetNum"  @click="toToDo(1)">
          <div class="confirmNumStyle">
            <span v-if="workSheetTotal.toString.length>0">{{workSheetTotal}}</span>
            <span v-else><i class="el-icon-loading"></i></span>
          </div>
          <div>工单总量</div>
        </div>
        <div class="toDoNum"   @click="toToDo(2)">
          <div class="confirmNumStyle">
            <span v-if="toDealWorkSheetNum.toString.length>0">{{toDealWorkSheetNum}}</span>
            <span v-else><i class="el-icon-loading"></i></span>
          </div>
          <div>待处理工单量</div>
        </div>
        <div class="submitNum"   @click="toToDo(3)">
          <div class="confirmNumStyle">
            <span v-if="mySubmitWorkSheet.toString.length>0">{{mySubmitWorkSheet}}</span>
            <span v-else><i class="el-icon-loading"></i></span>
          </div>
          <div>我提交工单量</div>
        </div>
        <div class="finishNum"   @click="toToDo(4)">
          <div class="confirmNumStyle">
            <span v-if="myFinishedWorkSheet.toString.length>0">{{myFinishedWorkSheet}}</span>
            <span v-else><i class="el-icon-loading"></i></span>
          </div>
          <div>完结工单量</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { Swiper,SwiperItem,XCircle,XHeader  } from 'vux';
  import request from '../../config/request.js';
  export default {
    components: {
      Swiper,
      SwiperItem,
      XCircle,
      XHeader
    },
    name: "workSheetHomePage",
    data: function () {
      return {
        //工单功能
        workSheetInfo: [{title: '运维工单', handle: '处理工单', record: '历史工单记录'}, {title: '报警工单', handle: '处理工单', record: '报警工单记录'}, {title: '预警工单', handle: '处理工单', record: '预警工单记录'}],
        //工单代办事项
        sites: [{imgUrl:require('../../assets/icon/look-function.png'), content:'设备点检'},{imgUrl:'', content:'设备xun'},{imgUrl:'', content:'设检'},{imgUrl:'', content:'点检'},{imgUrl:'', content:'备点检'}],
        //组织架构人员
        structurePerson: [],
        //组织架构名称
        structureNames: [],
        //
        index: 0,
        percent: '',
        //工单数据
        workSheetTotal:'',
        toDealWorkSheetNum:'',
        mySubmitWorkSheet:'',
        myFinishedWorkSheet:'',
        workSheetList:0,
        toDealWorkSheetList:0,
        mySubmitWorkSheetList:0,
        myFinishedWorkSheetList:0,
        userInfo:{},
        historyRecord:[]
      }
    },
    created: function () {
      this.userInfo = request.getUserInfo();
      this.loadWorkSheetInfo();
      this.loadMyWorkSheets();
      this.loadFinishedWorkSheets();
    },
    // workSheetHomePage
    //返回首页的公共方法
    'inject':["backToHomepage"],
    methods: {
      //搜索公司
      searchCompany: function(){
        alert("待开发中");
      },
      getMenuIndex: function(index){
        if(index == 0){
          this.$router.push({name: 'workSheetManage'});
        }
      },
      //点击跳转到对应的页面
      toToDo(type){
        if(type==1){
           this.$router.push(
          {
            name: 'historyWorkOrder',
            query: {
              page: 'history',
              index:2,
              indexType:1
            }
          });
        }else if(type==2){
          this.$router.push(
          {
            name: 'historyWorkOrder',
            query: {
              page: 'unprocessed',
              index:0,
              indexType:2,
              typeNum:2,
            }
            });
        }else if(type==3){
           this.$router.push(
            {
              name: 'historyWorkOrder',
              query: {
                page: 'history',
                index:2,
                indexType:3
              }
          });
        }else if(type==4){
           this.$router.push(
          {
            name: 'historyWorkOrder',
            query: {
              page: 'history',
              index:2,
              indexType:4,
            }
          });
        }
      },

      loadWorkSheetInfo: function(){
        this.$http(this.$API.getAllManagerNum, {departmentId:'0'},true).then((data)=>{
          if(data!=undefined){
            this.workSheetTotal = data.total;
            this.loadUndealWorkSheets();
          }else{
            this.percent = 0
          }
        })
      },
      // 历史工单记录
    getHistoryWorkSheet: function(){
      var params = {
        departmentId: this.userInfo.deparment.id
      }
      this.$http(this.$API.loadHistoryWorkSheet, params, true).then((data)=>{
        this.historyRecord = data.total;
      })
    },

    // 待处理工单总数
   /*  loadUndealWorkSheets: function(){
      this.$http(this.$API.loadToDealWorkSheet, {},true).then((data)=>{
        if(data ){
          this.toDealWorkSheetList = data.workSheets;
          localStorage.setItem("toDealWorkSheetList",JSON.stringify(this.toDealWorkSheetList));
          this.toDealWorkSheetNum = data.workSheets.length;
          this.percent =((this.workSheetTotal-this.toDealWorkSheetNum)/this.workSheetTotal)*100;
        }else{
          this.percent = 100
        }
      })getUnHandleManagerNum
    }, */
     // 待处理工单总数
    loadUndealWorkSheets: function(){
      this.$http(this.$API.getUnHandleManagerNum, {},true).then((data)=>{
        if(data){
            this.toDealWorkSheetNum = data.total;
            if(this.workSheetTotal == 0){
              this.percent = 0;
            }else{
              this.percent =((this.workSheetTotal-this.toDealWorkSheetNum)/this.workSheetTotal)*100;
            }
        }else{
          this.percent = 100;
        }
        this.percent = parseInt(this.percent);
      })
    },


    // 我提交的工单
    loadMyWorkSheets: function(){
      this.$http(this.$API.getSubmitManagerNum, {},true).then((data)=>{
        if(data!=undefined){
          this.mySubmitWorkSheet = data.total;
        }
      })
    },
    /* loadMyWorkSheets: function(){
      this.$http(this.$API.mySubmitWorkSheets, {},true).then((data)=>{
        if(data){
          this.mySubmitWorkSheetList = data.workSheets;
          this.mySubmitWorkSheet = data.workSheets.length
        }
      })
    }, */

    // 我完结的工单
    loadFinishedWorkSheets: function(){
      this.$http(this.$API.getHandleManagerNum, {},true).then((data)=>{
        if(data!=undefined){
          this.myFinishedWorkSheet = data.total;
        }
      })
    },
    /* loadFinishedWorkSheets: function(){
      this.$http(this.$API.myFinishedWorkSheets, {},true).then((data)=>{
        if(data){
          this.myFinishedWorkSheetList = data.workSheets
          this.myFinishedWorkSheet = data.workSheets.length
        }
      })
    }, */

    },
  }

</script>

<style lang="less" scoped>
@import '../../styles/iconfont.css';
  .workSheetHomePage {
    background: #22233f;
    height: 100vh;
    .main{
      .introduce{
        /*padding: 20px auto;*/
        color: #fff;
        height: 50px;
        /* font-size: 20px;
        line-height: 50px;
        text-align: center; */
        // background: url('../../assets/icon/bggd.png');
        // background-size: 100% 100%;
      }
      .introduce .spanSty{
        float:left;
        font-size: 20px;
        text-align: center;
        line-height: 70px;
        margin-top: -9px;
        margin-left: 34%;
      }
      .description{
        color: #ffffff;
        width: 90%;
        margin: 0 5%;
        .workSheetNum{
          width: calc(~"50% - 1px");
          float: left;
          text-align: center;
          padding: 10px 0;
          border-right: 1px rgba(255,255,255,0.2) solid;
          border-bottom: 1px rgba(255,255,255,0.2) solid;
        }
        .toDoNum{
          width: calc(~"50% - 1px");
          float: left;
          text-align: center;
          padding: 10px 0;
          border-left: 1px rgba(255,255,255,0.2) solid;
          border-bottom: 1px rgba(255,255,255,0.2) solid;
        }
        .submitNum{
          width: calc(~"50% - 1px");
          float: left;
          text-align: center;
          padding: 10px 0;
          border-right: 1px rgba(255,255,255,0.2) solid;
          border-top: 1px rgba(255,255,255,0.2) solid;
        }
        .finishNum{
          width: calc(~"50% - 1px");
          float: left;
          text-align: center;
          padding: 10px 0;
          border-left: 1px rgba(255,255,255,0.2) solid;
          border-top: 1px rgba(255,255,255,0.2) solid;
        }
        .confirmNumStyle{
          color: #3967DC;
          font-size: 20px;
        }
      }
      .vux-circle-demo {
        padding-top: 20px;
        text-align: center;
      }
      .vux-circle-demo > div {
        margin: 0 auto;
      }
    }
  }
  .home-scircle{
    width: 80%;
    margin: 0 auto 30px!important;
    position: relative;
    img{
      width: 100%;
      display: block;
    }
    .home-scirle-inner{
      position: absolute;
      left: 50%;
      top: 52%;
      width: 240px;
      height: 240px;
      margin-left: -120px;
      margin-top: -120px;
      background: url('../../assets/icon/icon2.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 52px;
      color: #fff;
    }

  }
  .backHome{
    line-height: 28px;
    text-align: center;
    width: 30px;
    height: 30px;
    border-radius: 4em;
    background: rgb(3, 6, 28);
    float: right;
    margin:10px 13px;
    border: 1px #456de6 solid;
    opacity: 1;
  }
   .worksOrders{
      float: left;
      width: 40px;
      height: 40px;
      margin-top: 4px;
  }
</style>

<style lang="less">
.workSheetHomePage{
  .vux-circle-content{
    font-size: 50px;
    font-weight: bold;
    span{
       color: #fff!important;
    }
  }
}
</style>